<template>
  <div class="module">
    <div class="menu-top">
      <div class="menu-left">
        <div v-for="(menu,index) in topLeftMenu" :key="index" class="menu-div" :class="menu.show ? 'menu-choice':''" @click="choiceMenu(menu)">{{ menu.label }}</div>
      </div>
      <div class="menu-right">
        <div v-for="(menu,index) in topRightMenu" :key="index" :title="menu.label" class="menu-btn menuBg"  @click="choiceMenuBtn(menu)">
          <img class="menu-img" :src="menu.imgUrl"></img>
        </div>
        <div title="返回首页" class="menu-btn homeBg" @click="returnHome()"></div>
      </div>
    </div>
    <div class="btn-right">
      <div v-for="(menu,index) in rightMenu" :key="index" :title="menu.label" @click="choiceRightMenuBtn(menu.id)">
        <div class="menu-btn-right" :class="contentTitle == menu.label ? 'menuBg-actice' : 'menuBg'"  >
          <img class="menu-img" :src="menu.imgUrl"></img>
        </div>
      </div>
    </div>
    <div class="mine-content">
     <!-- <component @close="close" :is="menuNow.com"></component> -->
      <mine-tree-card-child v-show="menuNow.id == 1 && menuNow.show" @closeMineTree="closeModel"></mine-tree-card-child>
      <RiskStatics v-if="menuNow.id == 2 && menuNow.show" @closeRisk="closeModel" :gnss="gnssList" :video="videoList" :dust="dustList"></RiskStatics>
      <MiningRange v-if="menuNow.id == 3 && menuNow.show" @closeRange="closeModel" ></MiningRange>
      <SlopeDeformation v-if="menuNow.id == 4 && menuNow.show" @closeSlope="closeModel" ></SlopeDeformation>
    </div>
    <div class="bottom-content" v-if="bottomShow">
      <div class="bottom-content-title">{{ contentTitle + '历史数据' }}</div>
      <div></div>
    </div>
  </div>
</template>

<script setup>
import { emitter } from "@/utils/events";
import { ElMessage } from 'element-plus'
import MineTreeCardChild from "@/components/MineTreeCard/MineTreeCardChild"; // 矿山名录
import RiskStatics from '@/views/safety/sar/module/riskStatics.vue'
import MiningRange from '@/views/safety/sar/module/miningRange.vue'
import SlopeDeformation from '@/views/safety/sar/module/slopeDeformation.vue'
import useOnemapStore from "@/store/modules/onemap";
import { FunnelChart } from "echarts/charts";
const onemapStore = useOnemapStore();
const topLeftMenu = ref([
  {id: 1, label: '矿山名录', show: false},
  {id: 2, label: '风险统计', show: false},
  {id: 3, label: '开采范围', show: false},
  {id: 4, label: '边坡形变情况', show: false},
])
const topRightMenu = ref([
  {id: 5, label: '超层超采监测', imgUrl:'/images/btn/cccc.png', show: false},
  {id: 6, label: '越界超采监测', imgUrl:'/images/btn/yjcc.png', show: false},
  {id: 7, label: '形变疑似风险分级', imgUrl:'/images/btn/fxfj.png', show: false},
  {id: 8, label: '风险范围提取', imgUrl:'/images/btn/fxtq.png', show: false},
])
const rightMenu = ref([
  {id: 9, label: '卫星沉陷形变风险参考值', imgUrl:'/images/btn/ckz.png', show: false},
  {id: 10, label: '卫星正射影像', imgUrl:'/images/btn/zsyx.png', show: false},
  {id: 11, label: '卫星形变数据', imgUrl:'/images/btn/xbsj.png', show: false}
])
const menuNow = ref({})
const contentTitle = ref('')
const bottomShow = ref(false)
// 监听地图是否加载完毕 mapOnload-当前页面路由name
let mapInstance; // 量算函数
emitter.once("mapOnload", (map) => {
  mapInstance = map;
});

onActivated(() => {
  // 再次打开页面时在这里初始化地球中的内容
  console.log("组件被激活");
});

onDeactivated(() => {
  // 在这里清除本页面地图中的的加载内容
  console.log("组件被停用");
});

// menu切换
function choiceMenu(menu) {
  if (!onemapStore.currentOpenPitInfo.openPitNo && menu.id != 1) {
    ElMessage({
      showClose: true,
      message: '请先选择矿山',
      type: 'warning',
    })
  } else {
    topLeftMenu.value.forEach(item => {
      if (menu.id == item.id) {
        item.show = !menu.show
      } else {
        item.show = false
      }
    });
    menuNow.value = menu
  }
}
// 关闭模态框
function closeModel(id) {
  if (menuNow.value.id == id) {
    menuNow.value.show = false
    topLeftMenu.value.forEach(item => {
      if (id == item.id) {
        item.show = false
      }
    });
  }
}
// 选中按钮
function choiceMenuBtn(menu) {
  ElMessage({
    message: '请先上传卫星数据！',
    type: 'warning',
    plain: true,
  })
}
// 选中右侧历史数据按钮
function choiceRightMenuBtn(val) {
  rightMenu.value.forEach(item=>{
    if (item.id == val) {
      if (contentTitle.value == item.label) {
        bottomShow.value = false
        contentTitle.value = ''
      } else {
        bottomShow.value = true
        contentTitle.value = item.label
      } 
    }
  })
}
</script>

<style lang="scss" scoped>
.module {
  height: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 8px;
  position: relative;
}
.menu-top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  >div {
    height: 50px;
  }
  .menu-left {
    width: 70%;
    display: flex;
    align-items: center;
  }
  .menu-right {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 5px;
  }
  .menu-div {
    width: 110px;
    height: 34px;
    background-image: url('@/assets/images/green/menu-child.png');
    background-size: 100% 100%;
    margin-right: 20px;
    line-height: 34px;
    text-align: center;
    color: #eef1fa;
    font-family: PangMen;
    font-size: 16px;
    cursor: pointer;
  }
  .menu-div:active {
    scale: 0.9;
    background-image: url('@/assets/images/green/menu-child-active.png');
    background-size: 100% 100%;
  }
  .menu-choice {
    background-image: url('@/assets/images/green/menu-child-active.png');
    background-size: 100% 100%;
  }
  .menu-btn {
    height: 46px;
    width: 46px;
    cursor: pointer;
    margin-left: 20px;
    .menu-img {
      width: 22px;
      height: 22px;
      margin: 12px;
    }
  }
  .menu-btn:active {
    scale: 0.9;
  }
  .menuBg {
    background-image: url('@/assets/images/green/menu-bg.png');
    background-size: 100% 100%;
  }
  .homeBg {
    background-image: url('@/assets/images/green/home-btn.png');
    background-size: 100% 100%;
  }
}
.btn-right {
  position: absolute;
  width: 46px;
  height: 200px;
  top: 70px;
  right: 12px;
  pointer-events: all;
  .menu-btn-right {
    height: 46px;
    width: 46px;
    cursor: pointer;
    margin-bottom: 15px;
    .menu-img {
      width: 22px;
      height: 22px;
      margin: 12px;
    }
  }
  .menu-btn-right:active {
    scale: 0.9;
  }
  .menuBg {
    background-image: url('@/assets/images/green/menu-bg.png');
    background-size: 100% 100%;
  }
  .menuBg-actice {
    background-image: url('@/assets/images/green/menu-bg-click.png');
    background-size: 100% 100%;
  }
}
.mine-content {
  width: 370px;
  height: calc(90vh - 100px);
  position: absolute;
  left: 8px;
  top: 60px;
}
.bottom-content {
  width: 900px;
  height: 140px;
  background-image: url('@/assets/images/green/historyBg.png');
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, -20%);
  pointer-events: all;

  .bottom-content-title {
    height: 28px;
    width: 300px;
    line-height: 30px;
    font-size: 20px;
    font-family: PangMen;
    color: #eef1fa;
    margin-left: 60px;
  }
}
</style>